<!-- 新增/修改弹框 -->
<template>
  <!-- 新增/修改弹窗 -->
  <el-dialog
    v-model="dialogDetail.visible"
    :width="screenWidth"
    :fullscreen="mobile === 'mobile'"
    :title="dialogDetail.title"
    draggable
    close-icon="CloseBold"
    :close-delay="200"
    @close="closeDialog(false)"
  >
    <el-row v-loading="loading" :gutter="20">
      <el-col :span="detailSpan">
        <el-descriptions border title="" :column="2">
          <el-descriptions-item label="项目名称">{{ detailInfo.projectName }}</el-descriptions-item>
          <el-descriptions-item label="项目编号">{{ detailInfo.projectNum }}</el-descriptions-item>
          <el-descriptions-item label="项目负责人">{{ detailInfo.linkMan }}</el-descriptions-item>
          <el-descriptions-item label="责任人联系电话">{{ detailInfo.linkPhone }}</el-descriptions-item>
          <el-descriptions-item label="合同开工日期">{{ detailInfo.contractStartDate }}</el-descriptions-item>
          <el-descriptions-item label="实际竣工日期">{{ detailInfo.endDate }}</el-descriptions-item>
          <el-descriptions-item label="申请理由" :span="2">{{ detailInfo.applyReason }}</el-descriptions-item>
          <el-descriptions-item
            v-if="detailInfo.dicAttachments && detailInfo.dicAttachments[`竣工初验报告`]"
            label="竣工初验报告"
            ><div
              v-for="item in detailInfo.dicAttachments[`竣工初验报告`]"
              :key="item.attachmentId"
              @click.stop="download(item)"
            >
              <!-- <el-link type="primary">primary</el-link> -->
              <el-button type="primary" link>{{ item.attachmentName }}</el-button>
            </div></el-descriptions-item
          >
          <el-descriptions-item
            v-if="detailInfo.dicAttachments && detailInfo.dicAttachments[`竣工报告`]"
            label="竣工报告"
            ><div
              v-for="item in detailInfo.dicAttachments[`竣工报告`]"
              :key="item.attachmentId"
              @click.stop="download(item)"
            >
              <!-- <el-link type="primary">primary</el-link> -->
              <el-button type="primary" link>{{ item.attachmentName }}</el-button>
            </div></el-descriptions-item
          >
          <el-descriptions-item
            v-if="detailInfo.dicAttachments && detailInfo.dicAttachments[`项目完工承诺书`]"
            label="项目完工承诺书"
            ><div
              v-for="item in detailInfo.dicAttachments[`项目完工承诺书`]"
              :key="item.attachmentId"
              @click.stop="download(item)"
            >
              <!-- <el-link type="primary">primary</el-link> -->
              <el-button type="primary" link>{{ item.attachmentName }}</el-button>
            </div></el-descriptions-item
          >
          <el-descriptions-item
            v-if="detailInfo.dicAttachments && detailInfo.dicAttachments[`无拖欠农民工工资证明`]"
            label="无拖欠农民工工资证明"
            ><div
              v-for="item in detailInfo.dicAttachments[`无拖欠农民工工资证明`]"
              :key="item.attachmentId"
              @click.stop="download(item)"
            >
              <!-- <el-link type="primary">primary</el-link> -->
              <el-button type="primary" link>{{ item.attachmentName }}</el-button>
            </div></el-descriptions-item
          >
          <el-descriptions-item
            v-if="detailInfo.dicAttachments && detailInfo.dicAttachments[`工程完工暨工资付清公示现场照片`]"
            label="工程完工暨工资付清公示现场照片"
            :span="2"
            ><div
              v-for="item in detailInfo.dicAttachments[`工程完工暨工资付清公示现场照片`]"
              :key="item.attachmentId"
              @click.stop="download(item)"
            >
              <!-- <el-link type="primary">primary</el-link> -->
              <el-button type="primary" link>{{ item.attachmentName }}</el-button>
            </div></el-descriptions-item
          >
          <el-descriptions-item label="审核状态" :span="2">{{ detailInfo.auditTypeName }}</el-descriptions-item>
          <el-descriptions-item label="操作原因说明" :span="2">{{ detailInfo.refundReason }}</el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>
    <el-form
      v-if="dialogDetail.type == 1"
      ref="auditFormRef"
      :model="auditFormData"
      label-width="170"
      :rules="auditRules"
    >
      <el-row :gutter="20">
        <el-col>
          <el-form-item label="审核意见" prop="auditType" style="margin-bottom: 18px">
            <el-checkbox
              v-model="yesChecked"
              label="通过"
              @change="(value:boolean)=>{if(value) {auditFormData.auditType=1;noChecked=false}else auditFormData.auditType=undefined; }"
            />
            <el-checkbox
              v-model="noChecked"
              label="不通过"
              @change="(value:boolean)=>{if(value) {auditFormData.auditType=-1;yesChecked=false}else auditFormData.auditType=undefined; }"
            />
          </el-form-item>
        </el-col>
        <el-col v-if="detailInfo.refundableAmount && detailInfo.refundableAmount > 0" :span="12" :offset="0">
          <el-form-item label="可退还保证金" prop="refundableAmount">
            <el-input v-model="detailInfo.refundableAmount" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="detailInfo.refundableAmount && detailInfo.refundableAmount > 0" :span="12" :offset="0">
          <el-form-item label="退还保证金金额" prop="refundAmount">
            <el-input v-model="auditFormData.refundAmount" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :offset="0">
          <el-form-item label="操作原因说明" prop="refundReason">
            <el-input v-model="auditFormData.refundReason" type="textarea" :rows="3"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template v-if="dialogDetail.type != 0" #footer>
      <div class="dialog_footer">
        <el-button type="primary" :loading="loading" @click="handleSubmit">{{ dialogDetail.footBtn }} </el-button>
        <el-button @click="closeDialog(false)">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { useScreen } from "@/store/modules/screen";
import { GetProjectCompletedForm, AuditProjectCompleted } from "@/api/project/completed/index";
import { ProjectCompletedAuditForm } from "@/api/project/completed/types";
import { FormRules } from "element-plus/es/components/form/src/types";
import { downloadAttachment } from "@/api/common/other/index";
import { downloadFile } from "@/utils";

//声明变量
const screenStore = useScreen();
const mobile = computed(() => screenStore.device);
const screenWidth = ref(1200);
const props = defineProps({
  dialogDetail: {
    type: Object,
    default: () => ({
      visible: false,
      title: "详情",
      footBtn: "详情",
      id: 0,
      type: 0, //0: 详情  1: 审核
    }),
  },
});
const { dialogDetail } = toRefs(props);
const emit = defineEmits(["sendClose"]);
const loading = ref(false);
const auditFormRef = ref();
const detailSpan = ref(24);
const auditFormData = reactive<ProjectCompletedAuditForm>({});
const auditRules = reactive<FormRules<ProjectCompletedAuditForm>>({
  auditType: [
    {
      required: true,
      message: "请选择审核意见",
      trigger: "change",
    },
  ],
  refundReason: [
    {
      required: true,
      message: "请输入审核意见内容",
      trigger: "change",
    },
  ],
  refundAmount: [
    {
      required: true,
      message: "请输入退款金额",
      trigger: "change",
      validator(rule, value, callback, source, options) {
        if (value) {
          if (value < 0) {
            callback("退款金额不能小于0");
          } else if (value > detailInfo.value.refundableAmount) {
            callback("退款金额不能大于可退金额");
          } else {
            callback();
          }
        }
      },
    },
  ],
});

const yesChecked = ref(false);
const noChecked = ref(false);

//工资信息
const detailInfo = ref({} as any);

function initScreen() {
  if (mobile.value === "mobile") {
    screenWidth.value = screenStore.screenWidth;
  } else {
    screenWidth.value = 900;
    detailSpan.value = 24;
  }
}
//下载附件
const download = (item: any) => {
  downloadAttachment(item.attachmentId).then((res) => {
    downloadFile(res);
  });
};
const initForm = function () {
  if (dialogDetail.value.id) {
    auditFormData.id = dialogDetail.value.id;
    loading.value = true;
    //初始化详情
    GetProjectCompletedForm(dialogDetail.value.id)
      .then((res) => {
        if (res.type == 0) {
          if (res.success) {
            detailInfo.value = res.data;
          } else {
            ElMessage({
              type: "error",
              message: res.msg,
            });
          }
        } else {
          ElMessage({
            type: "error",
            message: res.msg,
          });
        }
      })
      .finally(() => {
        loading.value = false;
      });
  }
};
watch(
  () => dialogDetail.value.visible,
  () => {
    if (dialogDetail.value.visible) {
      auditFormRef?.value?.resetFields();
      initScreen();
      initForm();
    }
  }
);

onMounted(async () => {});

//提交审核
const handleSubmit = () => {
  if (dialogDetail.value.type == 1) {
    auditFormRef.value.validate((valid: any) => {
      if (valid) {
        loading.value = true;
        AuditProjectCompleted(auditFormData)
          .then((res) => {
            if (res.type == 0) {
              if (res.success) {
                ElMessage({
                  type: "success",
                  message: res.msg,
                });
                closeDialog(true);
              } else {
                ElMessage({
                  type: "error",
                  message: res.msg,
                });
              }
            }
          })
          .finally(() => (loading.value = false));
      }
    });
  }
};

/**
 * 关闭弹窗
 */
function closeDialog(needRefresh: boolean) {
  emit("sendClose", needRefresh);
  auditFormData.auditType = 0;
  auditFormData.refundAmount = 0;
  auditFormData.refundReason = "";
  yesChecked.value = false;
  noChecked.value = false;
}
</script>

<style lang="scss" scoped></style>
